<template>
    <el-time-picker
        v-model="formData[item.prop]"
        class="use-time-picker"
        :disabled="disabled || item.disabled"
        :readonly="readonly || item.readonly"
        :style="item.style ? item.style : { width: '100%' }"
        :editable="item.editable"
        :clearable="item.clearable"
        :value-format="item.valueFormat"
        :format="item.format"
        :placeholder="item.placeholder"
        :picker-options="item.pickerOptions"
        :default-value="item.defaultValue"
        :range-separator="item.rangeSeparator"
        :start-placeholder="item.startPlaceholder ? item.startPlaceholder : '开始时间'"
        :end-placeholder="item.endPlaceholder ? item.endPlaceholder : '结束时间'"
        :is-range="item.isRange"
        :arrow-control="item.arrowControl"
        popper-class="use-time-poper"
        @change="change"
    />
</template>

<script>
import { useFormProps, changeItem } from './useFormProps'
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'UseTimePicker',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const change = () => {
            changeItem(context, props)
        }
        return {
            change
        }
    }
})
</script>

<style lang="scss">
.use-time-picker {
  .el-input__wrapper {
    width: 100%;
  }
}
.use-time-poper {
  .el-time-panel__content {
    &::before {
      display: none;
    }
    .el-time-spinner__item {
      margin: 0 4px;
      &.is-active {
        background: $col-e2;
        color: $main_color;
        font-weight: 500;
      }
    }
  }
}
</style>
